<template>
	<view class="">
		<view class="searchTop">
			<view  class="navBlock">
				<view v-for="(item,index) in nav" :key="index" class="nav" :class="current==index?'change':''" @click="clknav(index)">
					<view>{{item.name}}</view>
				</view>
				<view class="sear" @click="sear">
					<u-icon name="search" color="#fff" size="30"></u-icon>
					<view style="position: relative;bottom: 30rpx;font-size: 24rpx;">搜索</view>
				</view>
			</view>
		</view>
		
		<view class="u-flex u-padding-30 u-border-bottom" v-for="(item,index) in list" :key="index" @click="detail(item)">
		   <view >
			   <u-image :src="item.cover" width="180" height="120"></u-image>
		   </view>	
		   <view class="u-margin-left-20">
			   <view style="font-weight: bold;font-size: 30rpx;">{{item.title}}</view>
			   <view style="color: #999;margin-top: 20rpx;">{{item.address}}</view>
		   </view>
		 
		</view>
		
		<u-loadmore :status="status" />
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nav: [{
						name: ' 物流'
					},
					{
						name: '饭店'
					}
				],
				list:[],
				current: 0,
				page: 1,
				status: 'loadmore',
				
			}
		},
		onLoad() {
			this.adv()
		},
		onReachBottom() {
			if (this.status == 'nomore') {
		
			} else {
				this.goods()
			}
		
		},
		methods:{
			sear(){
			  uni.navigateTo({
			  	url:"./search"
			  })
			},
			
			detail(item){
				uni.navigateTo({
					url:"./detail?id="+item.id +'&current='+item.type
				})
			},
			clknav(e){
				this.current=e;
				this.page=1
				this.adv()
			},
			adv(){
				this.$u.post('/api/index/ad', {
				   type:this.current+1,
				   page:this.page
				}).then(res => {
					var resList = res.data;
					if (this.page == 1) {
						this.list = []
					}
					if (resList.length > 9) {
						this.status = 'loadmore'
						this.page = this.page + 1
					} else {
						this.status = 'nomore'
					}
					this.list = this.list.concat(resList)
					this.loading = false
				}).catch(err => {
				
				})
			
			}
		}
	}
</script>

<style lang="scss">
	.searchTop {
	
		background: #007502;
		padding: 10rpx 30rpx 30rpx 30rpx;
		position: relative;
	
	}
	.sear{
	  position: absolute;
	  right:   0rpx;
	  vertical-align: middle;
	  width: 80rpx;
	  top: 0;
	}
	.navBlock{
		width: 400rpx;
		margin:auto;
		display: flex;
		text-align: center;
		border: 1rpx solid #FFFFFF;
		height: 70rpx;
		font-size: 32rpx;
		border-radius: 40rpx;
		line-height: 70rpx;
		color: #FFFFFF;
		
		
		.change{
			background: #fff;
			border-radius: 40rpx;
			color:#007502 ;
			
		}
		.nav{
			text-align: center;
		     width: 200rpx;
			
		}
	}
	
</style>
